<!--  -->
<template>
  <div class="head">
    <div class="right_box">
      <img src="../../../../public/img/1.png" alt="" style="border-radius: 50%;"/>
      <div>{{ username }}</div>
      <el-button type="text" style="width:auto !important;color: #fb9678;" @click="exitBtn">退出系统</el-button>
    </div>
  </div>
</template>
<script >
export default {
  name: "Header",
  data() {
    return {
      username: "",
    };
  },
  props: [],
  components: {},
  created() {
    this.username = JSON.parse(sessionStorage.getItem("username"));
    // console.log(this.username)
  },
  mounted() {},
  methods: {
    exitBtn(){
      sessionStorage.removeItem('token')
      sessionStorage.removeItem('username')
      sessionStorage.removeItem('menu')
      this.$router.push("/login")
    }
  },
};
</script>
<style lang='less' scoped>
.head {
  background-color: #364760 !important;
  width: 100%;
  .right_box {
    float: right;
    height: 50px;
    box-sizing: border-box;
    line-height: 50px;
    img {
      max-width: 30px;
      vertical-align: middle;
      cursor: pointer;
    }
    div {
      height: 30px;
      padding: 0 10px;
    }
    img,
    div {
      display: inline-block;
      // line-height: 30px;
    }

    img:nth-child(3) {
      border-radius: 50%;
    }
  }
}
</style>